<template>
  <el-aside style="width:auto;position:relative;overflow-x:hidden;">
    <!--<el-radio-group v-model="isCollapse" style="margin: 10px 0 10px 0;">-->
      <!--<el-radio-button :label="false">展开</el-radio-button>-->
      <!--<el-radio-button :label="true">收起</el-radio-button>-->
    <!--</el-radio-group>-->
    <p class="turn-btn" :class="{on: isCollapse}" @click="isCollapse = !isCollapse" >
      <span >&#xe62e;</span>
    </p>
    <el-menu default-active="2" class="el-menu-vertical-demo" unique-opened router :collapse="isCollapse">
      <el-submenu v-for="(item,index) in sideList" :key="index" :index="JSON.stringify(index)">
        <template slot="title">
        <i class="iconfont" v-html="item.UNICODE"></i>
        <span v-text="item.resourceName"></span>
        </template>
        <el-menu-item :class="{active:subItem.resourceUrl==path,noActive:subItem.resourceUrl!=path}" v-for="(subItem,index) in item.resourceList" v-if="subItem.resourceType==1" :key="index" @click.native="tabRoute(subItem.resourceUrl)" :index="subItem.resourceUrl" v-text="subItem.resourceName"></el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
	export default {
		data() {
			return {
				isCollapse:false,
        sideList:this.$sess.get('userInfo').resourceList,
        path:''
      }
    },
    watch:{
		  "$route"(){
		    this.path = this.$route.path
      }
    },
    created () {
      // UNICODESiderOptions
      let list = this.$store.state.common.UNICODESiderOptions
      this.sideList.map((item, index) => {
        list.map(itemTo => {
          if (item.resourceId == itemTo.id) this.$set(item, 'UNICODE', itemTo.code)
        })
      })
    },
    methods:{
      tabRoute(path){
		    if(path){
          this.$router.push(path)
        }else{
          // this.$router.push('/dataStatic');
          this.$message({message: '敬请期待'});
        }
      }
    }
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-aside{
  width: auto;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
::-webkit-scrollbar{
  display: none;
}
.turn-btn{
  height:88px;text-align:center;line-height:88px;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 9;
  margin-top: -44px;
  widows: 14px; background: rgba(173,173,173, .5);
  border-radius: 6px 0 0 6px ;
  cursor: pointer;
   transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
.turn-btn span{ font-family: "iconfont"; font-size: 12px;
  color: #fff;
  transform: rotate(90deg);
  display: inline-block;
  vertical-align: middle;
}
/* .el-submenu{ z-index: 1; position: relative;}
.el-submenu:after{ content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(41,144,196, .5); z-index: -1;
  transform: translateX(-100%);
  transition: all .3s ease-in-out;
}
.el-submenu:hover::after{
  transform: translate(0)
} */


.el-menu-item{ position: relative; z-index: 2; }
.el-menu-item:after{ content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(41,144,196, 1); z-index: -1;
  transform: translateX(100%);
  transition: all .3s ease-in-out;
   border-radius: 30px 0 0 30px;
  opacity: 0;
}
.el-menu-item.is-active.active{color: #fff !important;}
.el-menu-item.is-active.active:after{ transform: translate(0); opacity: 1;}

.turn-btn:hover{
  background: rgba(173,173,173, 1);

}
.turn-btn.on span{
  transform: rotate(-90deg);
}
.turn-btn button{
  padding: 10px;
}
.active{
  color:#2990C4 !important;
}
.noActive{
  color:#303133 !important;
}
.iconfont {
  font-size: 18px; font-family: 'iconfont'; color: #303133; padding-right: 8px; padding-top: 3px; font-style: normal;
}
.el-submenu__title{ padding-left: 18px !important;}
</style>




